<template>
    <div class="nest">
        <el-form class="search-form" inline size="mini">
            <!-- <el-form-item>
                <el-input v-model="search.point" placeholder="输入萌宠币" clearable @change="getList" />
            </el-form-item> -->
            <el-form-item>
                <el-select v-model="search.change_mode" placeholder="类型" clearable @change="getList">
                    <el-option label="收入" value="1" />
                    <el-option label="支出" value="2" />
                </el-select>
            </el-form-item>
            <!-- <el-form-item>
                <el-date-picker v-model="value2" type="daterange" align="right" unlink-panels range-separator="至"
                    start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
                </el-date-picker>
            </el-form-item> -->
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">查询</el-button>
                <el-button icon="el-icon-refresh-left" size="mini" @click="handleResetSearch">重置</el-button>
            </el-form-item>
            <!-- <add-camera ref="addCamera" @success="getList"></add-camera> -->
        </el-form>
        <div class="table">
            <el-table v-loading="loading" :data="tableData" :border="true" style="width: 100%;margin-bottom: 20px;">
                <el-table-column prop="id" label="ID" width="130" show-overflow-tooltip>
                </el-table-column>
                <!-- <el-table-column prop="v2" label="用户名称" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="v3" label="手机号" show-overflow-tooltip>
                </el-table-column> -->
                <el-table-column prop="change_mode" label="类型" show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{ scope.row.change_mode == 1 ? "收入" : "支出" }}
                    </template>
                </el-table-column>
                <el-table-column prop="bef_money" label="当前萌宠币" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="money" label="操作数量" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="aft_money" label="剩余萌宠币" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="memo" label="变更说明" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="created_at" label="创建时间" show-overflow-tooltip>
                </el-table-column>
            </el-table>
            <div style="text-align: right;">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="search.page" :page-sizes="[10, 20, 30, 40, 100]" :page-size="search.size" background
                    layout="total, sizes, prev, pager, next" :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
const pickerOptions = {
    shortcuts: [{
        text: '最近一周',
        onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
        }
    }, {
        text: '最近一个月',
        onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
        }
    }, {
        text: '最近三个月',
        onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
        }
    }]
}

export default {
    // components: { addCamera },
    data() {
        return {
            loading: false,
            search: {
                change_mode: "",//true	int		类型 0 全部1 收入 2 支出
                user_id: "",	//true	int		用户 id
                // point: "",	//true	int		积分数
            },
            tableData: [],
            total: 0,
            pickerOptions
        }
    },
    created() {
        if (this.$route.query.user_id) {
            this.search.user_id = this.$route.query.user_id
        }
        this.getList()
    },
    methods: {
        // 积分记录
        async getList() {
            this.loading = true
            let res = await this.$request({
                url: '/admin/user.user/moneyRecords',
                method: 'get',
                params: this.search
            })
            this.loading = false
            if (res.code == 200) {
                this.tableData = res.result.data
                this.total = res.result.total
            }
        },
        handleResetSearch() {
            this.search.change_mode = ""
            this.getList()
        },
        //分页
        handleSizeChange(e) {
            this.search.size = e;
            this.getList()
        },
        handleCurrentChange(e) {
            this.search.page = e;
            this.getList()
        },
    }
}
</script>

<style lang="scss">
.nest {
    width: 100%;
    height: 60px;

    .search-form {
        background: #fff;
        border-radius: 12px;
        padding: 12px 20px;
        margin-bottom: 20px;

        .el-form-item--mini.el-form-item {
            margin-bottom: 0;
        }
    }

    .table {
        padding: 12px 20px;
        background: #fff;

        .el-table__body-wrapper {
            max-height: calc(100vh - 300px);
            overflow-y: auto;
        }
    }
}
</style>
